<script setup>
import UserHeaderNoSearchBar from '@/components/UserHeaderNoSearchBar.vue';
import { ref, onMounted, onBeforeMount, nextTick } from 'vue';
import { onClickOutside, useStyleTag } from '@vueuse/core';
import { getHistoryList, setHistoryList } from '@/utils/CookieStorage';
import { ElMessage } from 'element-plus';
import { View } from '@element-plus/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { formatISOTime, formatToDate } from '@/utils/format';
import { getCareerSearchService } from '@/api/careerResources';
import { getAlumniEventSearchService } from '@/api/alumniEvent';
import WebFooter from '@/components/WebFooter.vue';
import { getTabCountsService } from '@/api/search';

useStyleTag(
  `@import 
  url("//at.alicdn.com/t/c/font_4799917_f8aj6ozos7i.css");`,
  { id: 'iconfont-css-searchResuts' })// 唯一 ID 防止重复
const route = useRoute()
const router = useRouter()


// 收起展开历史搜索展开面板
const isHistoryExpanded = ref(false)
const toggleHistoryExpand = () => {
  isHistoryExpanded.value = !isHistoryExpanded.value
}
//处理搜索面板展开
const showSearchPanel = ref(false)
const searchPanelRef = ref(null)

// 修改面板关闭逻辑
onClickOutside(searchPanelRef, () => {
  // debugger
  isHistoryExpanded.value = false
  showSearchPanel.value = false
})


// 处理点击搜索按钮
const historySearchList = ref(getHistoryList())
const searchText = ref('')
const goSearch = (keyword) => {
  // 跳转到搜索结果页
  if (keyword.trim() === '') {
    return
  }
  console.log('进行了搜索，搜索历史要更新', keyword);
  const index = historySearchList.value.indexOf(keyword);
  if (index !== -1) {
    // 存在相同的项，将原有关键字移除
    // splice(从哪开始，删除几个，项1，项2)
    historySearchList.value.splice(index, 1);
  }
  historySearchList.value.unshift(keyword);
  setHistoryList(historySearchList.value);
  // 手动设置路由查询参数search为keyword,然后再getArticleList()
  // 使用router.push更新路由
  router.push({
    query: { search: keyword }
  }).then(() => {
    searchText.value = keyword
    getTabCounts()
    getArticleList()
  })

  ElMessage.success('搜索成功')
}

const clearSearch = () => {
  historySearchList.value = []
  setHistoryList(historySearchList.value)
}
const deleteHistory = (index) => {
  historySearchList.value.splice(index, 1)
  setHistoryList(historySearchList.value)
}
//处理tab切换
// 在script部分添加
// 在script部分添加
// const typeTabs = ref([
//   { name: '综合结果', count: null },
//   { name: '职业规划', count: 41 },
//   { name: '行业资讯', count: 11 },
//   { name: '招聘信息', count: 2 },
//   { name: '校友活动', count: 2 }
// ])
const navSliderStyle = ref({
  left: '0px',
  width: '64px'
})
//处理顶部tab切换，综合,职业规划,行业资讯,招聘信息,校友活动
const handleTabClick = (index, $event) => {
  if (index !== activeTypeTab.value) {
    activeTypeTab.value = index
    const tabElement = $event.target.closest('.vui_tabs--nav-item')
    if (tabElement) {
      const textSpan = tabElement.querySelector('.vui_tabs--nav-text')
      const { left: parentLeft } = tabElement.parentElement.getBoundingClientRect()
      const { left, width } = textSpan.getBoundingClientRect()
      navSliderStyle.value = {
        left: `${left - parentLeft}px`,
        width: `${width}px`
      }
    }
    getArticleList()
    selectEventTimeTab.value = 0
    selectTimeTab.value = 0
    selectOverallTab.value = 0
    dateRange.value = null
  }
}

//处理更多筛选
const isMoreFilterActive = ref(false)
const toggleMoreFilter = () => {
  isMoreFilterActive.value = !isMoreFilterActive.value
}

// 定义当前选中的tab索引
const activeTypeTab = ref(0) //筛选综合,职业规划,行业资讯,招聘信息,校友活动
const typeTabs = ref([
  { name: '综合结果', count: null, type: 'career' },
  { name: '职业规划', count: 0, type: 'career', subType: 1 },
  { name: '行业资讯', count: 0, type: 'career', subType: 2, },
  { name: '招聘信息', count: 0, type: 'career', subType: 3 },
  { name: '校友活动', count: 0, type: 'event' }
])
const dateRange = ref(null)
const selectOverallTab = ref(0) //筛选综合,综合排序,最多浏览,最新发布,最多收藏
const selectTimeTab = ref(0) //筛选时间,全部日期,最近一周,最近一个月,最近半年,最近一年
const selectEventTimeTab = ref(0) //筛选时间,全部日期,未开始,进行中,已结束
const sortButtons = ref(['综合排序', '最多浏览', '最新发布', '最多收藏'])
const timeFilters = ref(['全部日期', '最近一周', '最近一个月', '最近半年', '最近一年'])
const eventTimeFilters = ref(['全部日期', '未开始', '进行中', '已结束'])

// 处理请求数据和分页
const resultList = ref([])
const loading = ref(false)
const resultTotalCount = ref(0); // 总条数,

// 定义请求参数对象
const params = ref({
  page: 1, // 当前页,第几页
  pageSize: 5, // 当前生效的每页条数
  keyword: searchText.value, // 搜索关键字,请求时需要将searchText赋值
  // type就是搜索类型,类型：career/event,即三种职业资讯和校友活动,
  // 除了校友活动,其余均为 career
  type: '',
  subType: '', //搜索子类型, 当type=career时有效,搜索子类型,1-职业规划 2-行业资讯 3-招聘信息）
  startTime: '', // 开始时间,格式：yyyy-MM-dd HH:mm:ss
  endTime: '', // 结束时间,格式：yyyy-MM-dd HH:mm:ss
});


// 基于 params 参数，获取文章列表
// 在getArticleList方法中添加参数处理逻辑
const getArticleList = async () => {
  if (searchText.value === '') {
    return
  }

  loading.value = true;

  params.value.keyword = route.query.search
  // 根据当前tab设置类型参数
  const currentTab = typeTabs.value[activeTypeTab.value];
  params.value.type = currentTab.type;


  // 设置职业资源子类型（仅当type=career时）
  if (currentTab.type === 'career') {
    params.value.subType = currentTab.subType || '';
    setCareerRequestParams();
    console.log('职业资源最终请求参数:', params.value);
    const res = await getCareerSearchService(params.value);
    console.log(res.data);
    resultTotalCount.value = res.data.total
    typeTabs.value[activeTypeTab.value].count = res.data.total
    resultList.value = res.data.records
    loading.value = false;

  }
  // 处理校友活动子类型（仅当type=event时）
  else if (currentTab.type === 'event') {
    params.value.subType = '';
    setAlumniEventRequestParams();
    console.log('校友活动最终请求参数:', params.value);
    const res = await getAlumniEventSearchService(params.value);
    console.log(res.data);
    resultTotalCount.value = res.data.total
    typeTabs.value[activeTypeTab.value].count = res.data.total
    resultList.value = res.data.records
    loading.value = false;

  }

};

// 在setCareerRequestParams函数上方添加getStartAndEndTime函数
const getCareerStartAndEndTime = (timeFilter) => {
  const now = new Date();
  let startTime = null;
  let endTime = now;

  switch (timeFilter) {
    case '最近一周':
      startTime = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      break;
    case '最近一个月':
      startTime = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate());
      break;
    case '最近半年':
      startTime = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate());
      break;
    case '最近一年':
      startTime = new Date(now.getFullYear() - 1, now.getMonth(), now.getDate());
      break;
    default: // 全部日期
      startTime = null;
      endTime = null;
  }

  return [startTime, endTime];
}

const setCareerRequestParams = () => {
  // 设置排序参数（映射selectOverallTab到1-4）
  const orderMap = { 0: 1, 1: 2, 2: 3, 3: 4 };
  const orderBy = orderMap[selectOverallTab.value] || 1;
  params.value.orderBy = orderBy;
  // timeFilters = ref(['全部日期', '最近一周', '最近一个月', '最近半年', '最近一年'])
  const timeFilter = timeFilters.value[selectTimeTab.value] || '';

  if (dateRange.value !== null) {
    // 设置时间参数（格式化为yyyy-MM-dd HH:mm:ss）
    params.value.startTime = dateRange.value?.[0] ?
      formatISOTime(dateRange.value[0]) : '';
    params.value.endTime = dateRange.value?.[1] ?
      formatISOTime(dateRange.value[1]) : '';
  }
  else {
    const tempDateRange = getCareerStartAndEndTime(timeFilter)
    params.value.startTime = tempDateRange[0] ? formatISOTime(tempDateRange[0]) : '';
    params.value.endTime = tempDateRange[1] ? formatISOTime(tempDateRange[1]) : '';
  }

  // 移除空值参数
  Object.keys(params.value).forEach(key => {
    if (params.value[key] === '') {
      delete params.value[key];
    }
  });

}


const setAlumniEventRequestParams = () => {
  // 设置排序参数（映射selectOverallTab到1-4）
  const orderMap = { 0: 1, 1: 2, 2: 3, 3: 4 };
  const orderBy = orderMap[selectOverallTab.value] || 1;
  params.value.orderBy = orderBy;
  // debugger
  // eventTimeFilters = ref(['全部日期', '未开始', '进行中', '已结束'])
  const eventTimeFiltersMap = { 0: null, 1: 1, 2: 2, 3: 3 }
  params.value.eventStatus = eventTimeFiltersMap[selectEventTimeTab.value] || '';

  // 移除空值参数
  Object.keys(params.value).forEach(key => {
    if (params.value[key] === '') delete params.value[key];
  });
}


// 处理分页逻辑
const onSizeChange = (size) => {

  params.value.page = 1; // 重新从第一页渲染
  params.value.pageSize = size; // 更新每页条数
  getArticleList();
};

const onCurrentChange = (page) => {
  // console.log(' 切换了');

  params.value.page = page; // 更新当前页

  getArticleList();
};

const setSelectOverallTab = (index) => {
  if (index !== selectOverallTab.value) {
    selectOverallTab.value = index;
    getArticleList();
  }
}
const setSelectTimeTab = (index) => {
  if (index !== selectTimeTab.value) {
    selectTimeTab.value = index;
    dateRange.value = null
    getArticleList();
  }
}

const setSelectEventTimeTab = (index) => {
  if (index !== selectEventTimeTab.value) {
    selectEventTimeTab.value = index;
    getArticleList();
  }
}
const setPreciseTime = () => {

  if (dateRange.value) {
    selectTimeTab.value = 0;
    console.log('精确时间', dateRange.value);
    getArticleList();
  }
}
const getTabCounts = async () => {
  const res = await getTabCountsService(searchText.value);
  console.log(res.data);
  const response = res.data;
  // 动态更新 typeTabs
  typeTabs.value = [
    { name: '综合结果', count: response.careerAll, type: 'career' },
    { name: '职业规划', count: response.career1, type: 'career', subType: 1 },
    { name: '行业资讯', count: response.career2, type: 'career', subType: 2 },
    { name: '招聘信息', count: response.career3, type: 'career', subType: 3 },
    { name: '校友活动', count: response.event, type: 'event' }
  ];
}
onBeforeMount(() => {
  searchText.value = route.query.search
  getTabCounts()
  getArticleList()
})
onMounted(() => {

  searchText.value = route.query.search
})
</script>

<template>
  <UserHeaderNoSearchBar></UserHeaderNoSearchBar>
  <!-- <el-button @click="getArticleList">dianj</el-button> -->
  <div class="i_cecream">

    <div class="search-layout">
      <!-- 搜索不到 -->

      <div>
        <div class="search-header">
          <!-- 搜索栏 -->
          <div class="search-input">
            <div class="search-input-container">
              <div class="flex_center">
                <!-- 不明觉厉的logo -->
                <svg style="display:none;" class="search-logo p_center_y">
                  <use xlink:href="#logo">
                  </use>
                </svg>

                <div class="search-input-wrap flex_between" ref="searchPanelRef">

                  <!-- 放大镜-->
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"
                    width="24" height="24" class="search-icon">
                    <path
                      d="M10.75 4.25C7.16015 4.25 4.25 7.16015 4.25 10.75C4.25 14.3399 7.16015 17.25 10.75 17.25C14.3399 17.25 17.25 14.3399 17.25 10.75C17.25 7.16015 14.3399 4.25 10.75 4.25zM2.25 10.75C2.25 6.05558 6.05558 2.25 10.75 2.25C15.4444 2.25 19.25 6.05558 19.25 10.75C19.25 15.4444 15.4444 19.25 10.75 19.25C6.05558 19.25 2.25 15.4444 2.25 10.75z"
                      fill="currentColor">
                    </path>
                    <path
                      d="M15.7929 15.7929C16.1834 15.4024 16.8166 15.4024 17.2071 15.7929L20.4571 19.0429C20.8476 19.4334 20.8476 20.0666 20.4571 20.4571C20.0666 20.8476 19.4334 20.8476 19.0429 20.4571L15.7929 17.2071C15.4024 16.8166 15.4024 16.1834 15.7929 15.7929z"
                      fill="currentColor">
                    </path>
                  </svg>
                  <!-- 删除按钮 -->
                  <svg v-show="searchText !== ''" @click="searchText = ''" class="clear-icon" width="16" height="16"
                    viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                      d="M8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75ZM9.64999 5.64303C9.84525 5.44777 10.1618 5.44777 10.3571 5.64303C10.5524 5.83829 10.5524 6.15487 10.3571 6.35014L8.70718 8.00005L10.3571 9.64997C10.5524 9.84523 10.5524 10.1618 10.3571 10.3571C10.1618 10.5523 9.84525 10.5523 9.64999 10.3571L8.00007 8.70716L6.35016 10.3571C6.15489 10.5523 5.83831 10.5523 5.64305 10.3571C5.44779 10.1618 5.44779 9.84523 5.64305 9.64997L7.29296 8.00005L5.64305 6.35014C5.44779 6.15487 5.44779 5.83829 5.64305 5.64303C5.83831 5.44777 6.15489 5.44777 6.35016 5.64303L8.00007 7.29294L9.64999 5.64303Z"
                      fill="#C9CCD0">
                    </path>
                  </svg>
                  <!-- 输入框 -->
                  <input v-model.trim="searchText" @focus="showSearchPanel = true" @keyup.enter="goSearch(searchText)"
                    class="search-input-el" type="text" placeholder="输入关键字搜索">
                  <button class="vui_button vui_button--blue vui_button--lg search-button"
                    @click="goSearch(searchText)">搜索</button>
                  <!-- 搜索记录 -->
                  <div v-show="showSearchPanel" class="search-panel search-panel-popover" style="display: none;">

                    <div class="history">
                      <div class="header">
                        <div class="title">搜索历史</div>
                        <div class="clear" @click="clearSearch">清空</div>
                      </div>
                      <div class="histories-wrap" :style="{ maxHeight: isHistoryExpanded ? '172px' : '92px' }">
                        <div class="histories">
                          <div class="history-item" tabindex="0" v-for="(item, index) in historySearchList"
                            :key="index">
                            <div class="history-text" @click="goSearch(item)">{{ item }}</div>
                            <div class="close" @click="deleteHistory(index)">
                              <svg viewBox="0 0 1024 1024" width="14" height="14">
                                <path d="M512 64.303538c-247.25636 0-447.696462 200.440102-447.696462 447.696462
                0 247.254314 200.440102 447.696462 447.696462 447.696462s447.696462-200.440102
                447.696462-447.696462S759.25636 64.303538 512 64.303538zM710.491727 665.266709c12.491499
                12.491499 12.489452 32.729425-0.002047 45.220924-6.246261 6.246261-14.429641 9.370415-22.611997
                9.370415s-16.363689-3.121084-22.60995-9.366322L512 557.222971 358.730221 710.491727
                c-6.246261 6.246261-14.429641 9.366322-22.611997 9.366322s-16.365736-3.125177-22.611997-9.370415
                c-12.491499-12.491499-12.491499-32.729425 0-45.220924l153.268756-153.266709L313.50725 358.730221
                c-12.491499-12.491499-12.489452-32.729425 0.002047-45.220924s32.729425-12.495592 45.220924-0.004093
                l153.268756 153.268756 153.268756-153.268756c12.491499-12.491499 32.729425-12.487406 45.220924
                0.004093s12.493545 32.729425 0.002047 45.220924L557.225017 512 710.491727 665.266709z"></path>
                              </svg>
                            </div>
                          </div>

                        </div>
                      </div>
                      <div class="history-fold-wrap" @click.stop="toggleHistoryExpand">
                        <div class="fold-text">{{ isHistoryExpanded ? '收起' : '展开更多' }}</div>
                        <svg class="fold-icon " :class="{ fold: isHistoryExpanded === false }" viewBox="0 0 12 12">
                          <path fill-rule="evenodd" clip-rule="evenodd" d="M5.46967 9.17678C5.76256 9.46967 6.23744 9.46967 6.53033 9.17678L10.7286 4.97855
              C10.9238 4.78329 10.9238 4.46671 10.7286 4.27145C10.5333 4.07618 10.2167 4.07618 10.0214 4.27145L6 8.29289
              L1.97855 4.27145C1.78329 4.07618 1.46671 4.07618 1.27145 4.27145
              C1.07618 4.46671 1.07618 4.78329 1.27145 4.97855L5.46967 9.17678Z"></path>
                        </svg>
                      </div>
                    </div>

                    <div class="suggestions" v-if="false">
                      <div class="suggest-item" tabindex="0"><em class="suggest_high_light">啊啊啊</em>啊德凯</div>
                      <div class="suggest-item" tabindex="0"><em class="suggest_high_light">啊啊啊</em>啊啊啊啊啊bgm</div>
                      <div class="suggest-item" tabindex="0"><em class="suggest_high_light">啊啊啊</em>啊伟蜀黍</div>
                      <div class="suggest-item" tabindex="0"><em class="suggest_high_light">啊啊啊</em>神去村</div>
                      <div class="suggest-item" tabindex="0"><em class="suggest_high_light">啊啊啊</em>啊宝宝你是一个</div>
                      <div class="suggest-item" tabindex="0"><em class="suggest_high_light">啊啊啊</em>粥</div>
                      <div class="suggest-item" tabindex="0"><em class="suggest_high_light">啊啊啊</em>啊啊啊太爽了</div>
                      <div class="suggest-item" tabindex="0"><em class="suggest_high_light">啊啊啊</em>啊啊啊啊啊啊啊啊啊是什么梗</div>
                      <div class="suggest-item" tabindex="0">好爽<em class="suggest_high_light">啊啊啊</em>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
                      </div>
                      <div class="suggest-item" tabindex="0">嗯哼哼哼<em class="suggest_high_light">啊啊啊</em>啊啊</div>
                    </div>
                  </div>
                </div>
              </div>


            </div>
          </div>

          <!-- tab栏 -->
          <div class="search-tabs i_wrapper">
            <div class="vui_tabs">
              <nav class="vui_tabs--navbar">
                <ul class="vui_tabs--nav vui_tabs--nav-pl0">
                  <li v-for="(tab, index) in typeTabs" :key="index" :class="['vui_tabs--nav-item',
                    { 'vui_tabs--nav-item-active': activeTypeTab === index }]" @click="handleTabClick(index, $event)">
                    <span class="vui_tabs--nav-link">
                      <span class="vui_tabs--nav-text">{{ tab.name }}</span>
                      <span v-if="tab.count > 0 && index > 0" class="vui_tabs--nav-num">{{ tab.count>99? '99+' : tab.count }}</span>
                      <span v-if="tab.count === 0 && index > 0" class="vui_tabs--nav-num">0</span>
                    </span>
                  </li>




                </ul>
                <!-- 底部滑动线 -->
                <!-- <div class="vui_tabs--nav-slider vui_tabs--nav-animation" style="left: 0px; width: 64px;"></div> -->
                <div class="vui_tabs--nav-slider vui_tabs--nav-animation" :style="navSliderStyle"></div>
              </nav>

            </div>

          </div>
          <hr class="search-line">
          </hr>
          <!-- 过滤 -->
          <div class="search-filter">
            <div class="search-conditions i_wrapper mt_lg">

              <!-- 第一行筛选 -->
              <div class="conditions-order flex_between">
                <!-- 左侧 -->
                <div class="search-condition-row">

                  <button v-for="(btn, index) in sortButtons" :key="index" :class="['vui_button', 'vui_button--tab',
                    { 'vui_button--active': index === selectOverallTab }]" @click="setSelectOverallTab(index)">
                    {{ btn }}
                  </button>
                </div>
                <!-- 右侧 -->
                <button class="vui_button i_button_more 
                vui_button--more-filter" @click="toggleMoreFilter">
                  <span>更多筛选</span>
                  <svg :class="['i_icon_more',
                    { 'rotate_180': isMoreFilterActive }]" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24"
                    class="i_icon_more ts_all_fast rotate_90">
                    <path
                      d="M8.5429 3.04289C8.15237 3.43342 8.15237 4.06658 8.5429 4.45711L15.909 11.8232C16.0066 11.9209 16.0066 12.0791 15.909 12.1768L8.5429 19.5429C8.15237 19.9334 8.15237 20.5666 8.5429 20.9571C8.93342 21.3476 9.56659 21.3476 9.95711 20.9571L17.3232 13.591C18.2019 12.7123 18.2019 11.2877 17.3232 10.409L9.95711 3.04289C9.56659 2.65237 8.93342 2.65237 8.5429 3.04289z"
                      fill="currentColor">
                    </path>
                  </svg>
                </button>

              </div>

              <!-- 职业资源第二行筛选,更多条件 -->
              <div class="more_conditions" :style="{ height: isMoreFilterActive ? '45px' : '0' }" :class="{
                // ov_hidden处理骨架屏
                'ov_hidden': isMoreFilterActive === false
              }">
                <!--第二行筛选 -->
                <div class="search_condition_row2" v-if="typeTabs[activeTypeTab].type === 'career'">
                  <button v-for="(time, tIndex) in
                    timeFilters" :key="tIndex" :class="['vui_button',
                      'vui_button--tab',
                      { 'vui_button--active': tIndex === selectTimeTab }]" @click="setSelectTimeTab(tIndex)">
                    {{ time }}
                  </button>
                  <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" class="search_date_picker" @change="setPreciseTime" />
                </div>

                <!--  校友活动第二行筛选 -->
                <div class="search_condition_row2" v-else>
                  <button v-for="(time, tIndex) in
                    eventTimeFilters" :key="tIndex" :class="['vui_button',
                      'vui_button--tab',
                      { 'vui_button--active': tIndex === selectEventTimeTab }]" @click="setSelectEventTimeTab(tIndex)">
                    {{ time }}
                  </button>

                </div>

              </div>


            </div>

          </div>


        </div>

        <div class="search-content search-content--gray">
          <div class="search-page-wrapper">
            <div class="search-page search-page-all i_wrapper ">

              <div>
                <!-- 内容列表 -->
                <div class="search-all-list article_list ">

                  <!-- 骨架屏 -->
                  <div v-if="loading" class="banner_skeleton_wrap  ">
                    <el-skeleton :animated="true" :loading="true" :throttle="500">
                      <template #template>
                        <div class="skeleton_article" v-for="i in 4" :key="i">

                          <!-- 内容主体  -->
                          <div class="article-content">
                            <div class="content-left">
                              <el-skeleton-item variant="text" class="skeleton_title" />
                              <el-skeleton-item variant="p" class="skeleton_p" />
                              <el-skeleton-item variant="p" class="skeleton_p" />
                              <div class="bottom_stats">
                                <div class="left">
                                  <el-skeleton-item class="skeleton_bt_text_left" variant="text" v-for="i in 2"
                                    :key="i" />
                                </div>
                                <div class="right">
                                  <el-skeleton-item class="skeleton_bt_text_right" variant="text" v-for="i in 2"
                                    :key="i" />
                                </div>
                              </div>
                            </div>
                            <div class="content-right skeleton_right">
                              <!-- <img class="article-thumb" src="http://e.com" alt="文章封面"> -->
                              <el-skeleton-item class="right_img" variant="image" />
                            </div>
                          </div>
                        </div>

                      </template>
                    </el-skeleton>
                  </div>

                  <div class="hide" v-if="resultList.length === 0 && loading === false">
                    <el-empty description="搜索不到哦~" />
                  </div>


                  <div class="flex_gap">

                    <!-- 文章列表正文,备份拷贝 -->
                    <!--<div class="article_item" v-for="(item, index) in 3" :key="index">
                      <!~~ 内容主体 ~~>
                      <div class="article-content">
                        <div class="content-left">
                          <router-link target="_blank" class="article-title" to="/career-resource/1">
                            <em>职业发展</em>必备技能指南
                          </router-link>
                          <p class="article-desc word-2">
                            这两个星期学校进行<em>数据库</em>的课程<em>设计</em>，
                            我利用所学知识做出来了一个较为简单的<em>教务管理系统</em>，具体功能包括登录、人员管理、教师课程申请、管理员审批课程、
                            管理员安排课程、学生选课、教师给学生评分等等。他信表示，当前的情况如同泰国无意中在资助缅甸内战，不法分子将毒品卖给泰国的孩子获利，这种现象必须得到果断处理。他作为东盟主席顾问，受托处理的第一件事就是缅甸问题，因为其与缅甸交战各方都有联系。目前要通过对话解决问题，国际间问题的解决通常先通过非政府
                          </p>
                          <div class="article-stats">
                            <div class="left">
                              <div class="stat-item">
                                <el-icon>
                                  <View />
                                </el-icon>
                                2.3万+
                              </div>
                              <div class="stat-item like_icon">
                                <i class="iconfont icon-zan"></i>
                                156
                              </div>
                            </div>
                            <div class="right">
                              <a data-v-2175707e="" href="https://blog.csdn.net/frost131314" target="_blank"
                                title="查看主页" class="user">
                                <span class="name-text">Shoshana</span>
                              </a>
                              <span class="time">2013-11-08</span>
                            </div>

                          </div>
                        </div>
                        <div class="content-right">
                          <img class="article-thumb"
                            src="https://img0.baidu.com/it/u=361459010,3980229389&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"
                            alt="文章封面">
                        </div>
                      </div>
                    </div>-->

                    <div class="article_item" v-for="(item) in resultList" :key="item.id">
                      <!-- 内容主体 -->
                      <div class="article-content">
                        <div class="content-left">
                          <router-link target="_blank" v-html="item.title" class="article-title"
                            :to="typeTabs[activeTypeTab].type === 'career' ? `/career-resource/${item.id}` : `/alumni-event/${item.id}`">
                          </router-link>

                          <p class="article-desc word-2" v-html="item.summary">
                          </p>
                          <div class="article-stats">
                            <div class="left">
                              <div class="stat-item">
                                <el-icon>
                                  <View />
                                </el-icon>
                                {{ item.viewCount }}
                              </div>
                              <div class="stat-item like_icon">
                                <i class="iconfont icon-zan"></i>
                                {{ item.likeCount }}
                              </div>
                            </div>
                            <div class="right">
                              <a data-v-2175707e="" href="https://blog.csdn.net/frost131314" target="_blank"
                                title="查看主页" class="user">
                                <span class="name-text">{{ item.nickName }}</span>
                              </a>
                              <span class="time">{{ formatToDate(item.createTime) }}</span>
                            </div>

                          </div>
                        </div>
                        <div class="content-right">
                          <img class="article-thumb" :src="item.coverImageUrl" alt="文章封面">
                        </div>
                      </div>
                    </div>

                  </div>


                </div>

                <!-- 底部分页栏 -->
                <div class="pg_flex_center " v-if="resultList.length > 0">
                  <el-pagination v-model:current-page="params.page" v-model:page-size="params.pageSize" size="large"
                    :page-sizes="[2, 3, 5, 10]" :background="true" layout="jumper, total, sizes, prev, pager, next"
                    :pager-count="5" :total="resultTotalCount" @size-change="onSizeChange"
                    @current-change="onCurrentChange" />
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <WebFooter></WebFooter>

</template>

<style lang="scss" scoped>
.i_cecream {
  min-width: 1100px;
  max-width: 2560px;
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  background: #fff;
}

.search-input-container {
  --search_input_width: 640px;
  --search_input_height: 48px;
  --search_panel_top: 52px;
  --search_input_max_h: auto;
  --search_button_height: 38px;
  height: 44px;
}

.search-layout {
  height: 100%;
  // overflow: hidden;

  .search-header {
    height: 100%;
    padding-top: 30px;

    .search-input {
      margin-bottom: 20px;



      .flex_center {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        // margin: 0 auto;

        .search-input-wrap {
          position: relative;
          width: var(--search_input_width);
          height: var(--search_input_height);
          // max-height: auto;
          margin: 0 auto;
          padding: 5px;
          background: #f6f7f8;
          border: 1px solid #f1f2f3;
          border-radius: 6px;
          transition: all .2s;

          &:hover,
          .search-input-container .search-input-wrap.search-input-focus {
            background: #fff;
          }

          .search-icon {
            width: 20px;
            color: #00aeec;
            margin-left: 15px;
            margin-right: 10px;
          }

          svg {
            overflow: hidden;
            vertical-align: middle;
          }

          .clear-icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 115px;
            width: 20px;
            height: 20px;
            cursor: pointer;
            background: #fff;
            border-radius: 50%;
            // opacity: 0;
            transition: all .2s;
          }

          .search-input-el {
            width: calc(100% - 160px);
            // flex: 1;
            height: 36px;
            font-size: 18px;
            color: #18191c;
            margin-right: 15px;
            border: none;
            outline: none;
            background: transparent;
          }

          //搜索按钮
          .search-button {
            width: 100px;
            height: var(--search_button_height);
          }

          .vui_button--blue:hover {
            color: #fff;
            background: #40c5f1;
            border: 1px solid #40c5f1;
          }

          .vui_button--blue,
          .vui_button--blue:focus {
            color: #fff;
            background: #00aeec;
            border: 1px solid #00aeec;
          }

          .vui_button--lg {
            height: 40px;
            padding: 0 20px;
            font-size: 16px;
          }

          .vui_button {
            height: 34px;
            min-width: 100px;
            padding: 0 12px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1;
            white-space: nowrap;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: pointer;
          }

          //搜索历史
          .search-panel {
            position: absolute;
            left: 0;
            z-index: 998;
            width: 100%;
            max-height: 612px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #e3e5e7;
            border-top: none;
            border-radius: 0 0 8px 8px;
            padding: 13px 0 16px;
            -webkit-font-smoothing: antialiased;

            .history {
              .header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 16px;

                .title {
                  height: 24px;
                  font-size: 16px;
                  line-height: 24px;
                  color: #18191c;
                  font-family: PingFang SC, HarmonyOS_Medium, Helvetica Neue, Microsoft YaHei, sans-serif;
                  font-weight: 600;
                }

                .clear {
                  font-size: 12px;
                  line-height: 15px;
                  height: 15px;
                  color: #9499a0;
                  cursor: pointer;
                }


              }

              .histories-wrap {
                padding: 0 16px;
                overflow: hidden;
                transition: max-height 0.3s ease;

                .histories {
                  display: flex;
                  flex-wrap: wrap;
                  margin-top: 12px;
                  margin-right: -10px;
                  margin-bottom: 4px;

                  .history-item {
                    position: relative;
                    box-sizing: border-box;
                    height: 30px;
                    padding: 7px 10px 8px;
                    font-size: 12px;
                    line-height: 15px;
                    background: #f6f7f8;
                    border-radius: 4px;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    cursor: pointer;

                    &:hover {
                      outline: none;
                      color: #00aeec;

                      .close {
                        display: block;
                      }
                    }

                    .history-text {
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      max-width: 96px;
                    }

                    .close {
                      display: none;
                      box-sizing: border-box;
                      position: absolute;
                      width: 16px;
                      height: 16px;
                      top: -6px;
                      right: -6px;
                      padding: 2px;

                      svg {
                        width: 14px;
                        height: 14px;
                        fill: #ccc;
                      }
                    }
                  }
                }
              }

              .history-fold-wrap {

                display: flex;
                align-items: center;
                justify-content: center;
                width: 64px;
                margin: 0 auto 14px;

                &:hover {
                  .fold-text {
                    color: #00aeec;
                  }

                  .fold-icon {
                    fill: #00aeec;
                  }
                }

                .fold-text {
                  font-size: 12px;
                  line-height: 15px;
                  height: 15px;
                  color: #9499a0;
                  cursor: pointer;
                }

                .fold-icon {
                  width: 12px;
                  height: 12px;
                  fill: #9499a0;
                  cursor: pointer;
                  transform: rotate(180deg);
                  margin-left: 2px;
                  transition: transform 0.3s;

                  &.fold {
                    transform: rotate(0deg);
                  }
                }
              }

            }
          }

          .search-panel-popover {
            top: var(--search_panel_top);
            box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
          }

        }

        .flex_between {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
        }

      }


    }

    .i_wrapper {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 56px;

      .vui_tabs--navbar {
        position: relative;

        .vui_tabs--nav {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: start;
          -ms-flex-pack: start;
          justify-content: flex-start;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          list-style: none;
          position: relative;
        }


        .vui_tabs--nav.vui_tabs--nav-pl0 {
          .vui_tabs--nav-item:first-child {
            .vui_tabs--nav-link {
              padding-left: 0 !important;
            }
          }
        }

        .vui_tabs--nav-item {
          .vui_tabs--nav-text {
            color: #61666D;
            white-space: nowrap;
            margin-right: 4px;
            font-weight: 500;
            -webkit-transition: color .2s;
            transition: color .2s;
          }

          .vui_tabs--nav-link {
            display: inline-block;
            padding: 10px 24px;
            font-size: 16px;
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
          }
        }


      }

      .vui_tabs--navbar .vui_tabs--nav-item:hover .vui_tabs--nav-text,
      .vui_tabs--navbar .vui_tabs--nav-item-active .vui_tabs--nav-text {
        color: #00aeec !important;
      }

      .vui_tabs--nav-item .vui_tabs--nav-num {
        padding: 1px 6px;
        border-radius: 6px;
        font-size: 12px;
        color: #61666D;
        background: #f1f2f3;
      }

      .vui_tabs--nav-slider {
        position: absolute;
        bottom: 0;
        height: 4px;
        border-radius: 2px;
        background: #00aeec;

        &.vui_tabs--nav-animation {
          -webkit-transition: all .35s ease;
          transition: all .35s ease;
        }
      }


    }

    .search-line {
      margin-top: 3px;
      border: none;
      border-top: 1px solid #f1f2f3;
    }

    .search-filter {
      .search-conditions {

        //第一行筛选
        .conditions-order {
          display: flex;
          justify-content: space-between;
          align-items: center;

          //左侧
          .search-condition-row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;

          }
        }

        .vui_button {
          height: 34px;
          min-width: 100px;
          padding: 0 12px;
          border-radius: 8px;
          font-size: 14px;
          line-height: 1;
          white-space: nowrap;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          cursor: pointer;
        }

        // 添加按钮样式
        .vui_button--tab {
          background: #fff;
          color: #61666d;
          border: none;
          // flex-shrink: 0;
          // min-width: 100px;

          &:hover {
            color: #00aeec;
            background: #fff;
            border: none;
          }

          &.vui_button--active {
            background: #dff6fd;
            color: #00aeec;
          }
        }

        //右侧
        .vui_button--more-filter {
          background: #fff;
          border: 1px solid #e3e5e7;
          transition: all 0.3s;
          display: flex;
          justify-content: center;
          align-items: center;

          &:hover {
            background: #e3e5e7;
            color: #18191c;
          }

          .i_icon_more {
            transition: transform 0.3s;
            transform: rotate(90deg);
            width: 13px;
            height: 13px;
            margin-left: 5px;

            &.rotate_180 {
              transform: rotate(-90deg);
            }
          }
        }

        //右侧
        .i_button_more {
          padding: 0 10px !important;
          height: 34px !important;
          font-size: 14px !important;
        }

        //更多条件,第二行筛选
        .more_conditions {
          height: 0;
          // background-color: pink;

          transition: height .2s;

          .search_condition_row2 {
            padding-top: 10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;

            // 调整日期选择器样式
            :deep(.el-date-editor) {
              // width: 80px;


              // .search_date_picker {
              flex: 0.5; // 固定宽度且不允许缩放
              margin-left: 15px;
              // flex: 0  0 300px; // 固定宽度且不允许缩放
              // max-width: 100%;
              // margin-right: auto;

              :deep(.el-input__inner) {
                border-radius: 8px;
                border-color: #e3e5e7;
              }

              // :deep(.el-range-editor) {
              //   width: 100% !important; // 强制宽度继承父容器
              //   margin-left: 0 !important;
              // }
            }

            // }
          }

          &.elastic_height {
            height: 45px;
          }
        }

        .ov_hidden {
          overflow: hidden !important;
        }
      }

      .mt_lg {
        margin-top: 20px !important;
      }
    }
  }
}

@media (max-width: 1439.9px) {
  .search-layout .search-header {
    padding-top: 25px;

    .search-input {
      margin-bottom: 15px !important;
    }
  }

  .search-input-container {
    --search_input_width: 480px;
    --search_input_height: 44px;
    --search_panel_top: 46px;
    --search_button_height: 34px;
  }
}

@media (min-width: 1700px) {
  .search-input-container {
    --search_input_height: 54px;
    --search_panel_top: 58px;
    --search_button_height: 40px;
  }
}


.search-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
  position: relative;
  margin-top: 10px;
  // padding-top: 10px;
  // background-color: #fff;

  .search-page-wrapper {
    // background-color: #fff;

    .search-page-all {
      // background-color: #fff;



      .article_list {


        .flex_gap {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .article_item {
          padding: 16px 16px;
          border-bottom: 1px solid #f5f5f5;
          border-radius: 10px;
          background-color: #fff;

          &:hover {
            box-shadow: 0 0 7px 0 rgba(0, 0, 0, .15);
            background: #fff;
          }



          .user-info {

            display: flex;
            align-items: center;
            margin-bottom: 12px;

            .user-avatar {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              margin-right: 8px;
            }

            .user-name {
              color: #666;
              font-size: 14px;

              &:hover {
                color: #006fff;
              }
            }
          }

          .article-content {
            display: flex;
            justify-content: space-between;

            em {
              color: #fc5531;
              color: #f25d8e;
            }

            .content-left {
              width: 84%;
              padding-right: 24px;
            }

            .content-right {
              width: 16%;
              flex-shrink: 0;

              display: flex;
              justify-content: center;

              .article-thumb {
                width: 100%;
                // height: 80px;
                max-height: 108px;
                border-radius: 4px;
                object-fit: cover;
              }
            }
          }

          .article-title {
            font-size: 18px;
            color: #18191c;
            margin-bottom: 8px;
            display: block;
            cursor: pointer;

            &:hover {
              color: #00aeec;
            }
          }

          .article-desc {
            color: #555666;
            font-size: 14px;
            margin-bottom: 12px;
            line-height: 1.5;
          }

          .article-stats {
            display: flex;
            align-items: center;
            justify-content: space-between;
            // gap: 24px;
            color: #555666;
            font-size: 13px;

            .left {
              display: flex;

              gap: 24px;

              .stat-item {
                display: flex;
                align-items: center;
                gap: 4px;




                .icon-zan {
                  vertical-align: bottom;
                  margin-bottom: -3px;
                  font-size: 16px;
                }

                .icon-shoucang {
                  font-size: 13px;

                }
              }
            }

            .right {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              gap: 12px;

              .user {
                color: #555666;
              }


            }
          }


        }

      }

      .pg_flex_center {
        padding: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }






  }
}



//加载中的骨架屏
.banner_skeleton_wrap {
  width: 100%;
  padding: 16px 16px;
  padding-top: 0;
  border-bottom: 1px solid #f5f5f5;
  border-radius: 10px;

  .top_img {
    display: flex;
    justify-content: space-between;
    min-height: 142px;

    /* 骨架屏样式 */
    .banner_skeleton_img {
      flex: 1;
      height: inherit;
      margin: 0 16px;
      border-radius: 8px;
    }
  }

  .bottom_text {
    margin-top: 16px;

    .skeleton-text {
      width: 100%;
      height: 24px;
      margin: 8px 0;
    }
  }

  .skeleton_article {
    margin: 15px 0;

    .skeleton_title {
      width: 25%;
      height: 23%;

    }

    .skeleton_p {
      margin: 1px 0;
      max-width: 90%;
    }

    .skeleton_right {
      // margin-right: 3%;

      .right_img {
        border-radius: 8px;
        min-width: 140px;
        min-height: 100px;
      }
    }


    .article-content {
      display: flex;
      justify-content: space-between;

      em {
        color: #fc5531;
        color: #f25d8e;
      }

      .content-left {
        width: 84%;
        padding-right: 24px;
      }

      .content-right {
        width: 16%;
        flex-shrink: 0;

        display: flex;
        justify-content: center;

        .article-thumb {
          width: 100%;
          // height: 80px;
          max-height: 108px;
          border-radius: 4px;
          object-fit: cover;
        }
      }
    }

    .bottom_stats {
      display: flex;
      // border: 1px solid #000;
      max-width: 90%;
      // height: 11px;
      // align-items: center;
      justify-content: space-between;

      // color: #555666;
      // font-size: 13px;
      .skeleton_bt_text_left {
        width: 40px;
      }

      .skeleton_bt_text_right {
        width: 120px;
      }

      .left {
        display: flex;
        gap: 24px;
      }

      .right {
        display: flex;
        // align-items: center;
        justify-content: flex-end;
        gap: 12px;

        .user {
          // color: #555666;
        }


      }
    }

  }


}
</style>